<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    {include file="../tpl/header.html" /}
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <!--用户,时间信息-->
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <blockquote class="layui-elem-quote">欢迎{$user_info['role_name']}：
                        <span class="x-red">{$user_info['name']}</span>
                    </blockquote>
                    <blockquote class="layui-elem-quote layui-quote-nm">当前时间:
                        <span class="x-red" id="now-time"></span>
                    </blockquote>
                </div>
            </div>
        </div>
        <!--统计信息-->
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <blockquote class="layui-elem-quote">
                        <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5" action="{:url('admin/index/summaryData')}" onsubmit="return false;">

                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text" name="start_date" id="start_date" value="{:date('Y-m-d',strtotime('-7 day'))}" placeholder="起始日期" autocomplete="off" class="layui-input">
                                </div>

                                <div class="layui-inline layui-show-xs-block">
                                    <input type="text" name="end_date" id="end_date" value="{:date('Y-m-d')}" placeholder="结束日期" autocomplete="off" class="layui-input">
                                </div>

                                <div class="layui-inline layui-show-xs-block">
                                    <button class="layui-btn" onclick="summary_data()">查看</button>
                                </div>
                            </form>
                        </div>

                    </blockquote>
                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                    <div id="main" style="width: 100%;height:400px;"></div>
                    <blockquote class="layui-elem-quote">
                        注意：本案例的Echarts图表库由cdn引入，需要在线才能正常使用，如想离线，请至Echarts官网下载。
                    </blockquote>
                </div>
            </div>
            <script>
                //渲染form表单
                layui.use(['laydate','form','code'], function(){
                    var laydate = layui.laydate;
                    laydate.render({
                        elem: '#start_date'
                    });
                    laydate.render({
                        elem: '#end_date'
                    });
                    form = layui.form;
                });

                //获取统计数据
                function summary_data() {
                    var s = $('input[name=start_date]').val();
                    var e = $('input[name=end_date]').val();
                    if(s === '' || e === ''){
                        layer.msg('起始时间或者结束时间不能为空', {icon: 5,time: layer_msg_error_time});
                        return false;
                    }
                    $.ajax({
                        type:'post',
                        data:{"start_date":s,"end_date":e},
                        dataType:'json',
                        url:"{:url('admin/index/summaryData')}",
                        success:function (e) {
                            if(e.code === 1){
                                show_line_chart(e.data)
                            }else{
                                layer.msg(e.msg, {icon: 5,time: layer_msg_error_time});
                            }
                        }
                    });
                }
                //渲染折线图
                function show_line_chart(line_chart) {
                    var myChart = echarts.init(document.getElementById('main'));
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: line_chart['title']
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:line_chart['legend']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: line_chart['date']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: line_chart['series']
                    };

                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);

                }

                $(function () {
                    summary_data();
                });

            </script>

        </div>
        <!--系统信息,仅超管可看-->
        {if condition="config('app.super_role_id') eq $user_info['role_id']"}
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">系统信息</div>
                <div class="layui-card-body ">
                    <table class="layui-table">
                        <tbody>
                        <tr>
                            <th>运行环境</th>
                            <td>{$_SERVER['ENV']|default='dev'}</td>
                        </tr>
                        <tr>
                            <th>Thinkphp版本</th>
                            <td>V<?php echo \think\facade\App::version(); ?></td>
                        </tr>
                        <tr>
                            <th>服务器地址</th>
                            <td>{$_SERVER['SERVER_ADDR']}</td>
                        </tr>
                        <tr>
                            <th>服务器时间</th>
                            <td>{:date('Y-m-d H:i:s')}</td>
                        </tr>
                        <tr>
                            <th>操作系统</th>
                            <td>{:php_uname()}</td>
                        </tr>
                        <tr>
                            <th>php运行方式</th>
                            <td>{:php_sapi_name()}</td>
                        </tr>
                        <tr>
                            <th>PHP版本</th>
                            <td><?php echo PHP_VERSION; ?></td>
                        </tr>
                        <tr>
                            <th>Zend engine version</th>
                            <td>{:zend_version()}</td>
                        </tr>
                        <tr>
                            <th>运行用户</th>
                            <td>{:get_current_user()}</td>
                        </tr>
                        <tr>
                            <th>MYSQL版本</th>
                            <td><?php echo $mysql_version; ?></td>
                        </tr>
                        <tr>
                            <th>执行时间限制</th>
                            <td>{:get_cfg_var("max_execution_time")}s</td>
                        </tr>
                        <tr>
                            <th>socket连接超时时间</th>
                            <td>{:ini_get('default_socket_timeout')}</td>
                        </tr>
                        <tr>
                            <th>include_path</th>
                            <td>{:ini_get('include_path')}</td>
                        </tr>
                        <tr>
                            <th>error_reporting level</th>
                            <td>{:ini_get("display_errors")}</td>
                        </tr>
                        <tr>
                            <th>POST提交限制</th>
                            <td>{:ini_get("post_max_size")}</td>
                        </tr>
                        <tr>
                            <th>upload_max_filesize</th>
                            <td>{:ini_get("upload_max_filesize")}</td>
                        </tr>
                        <tr>
                            <th>opcache|time</th>
                            <td>{:ini_get('opcache.enable')}|{:ini_get('opcache.revalidate_freq')}</td>
                        </tr>
                        <tr>
                            <th>已经开启的扩展</th>
                            <td>
                                {php}
                                foreach(array_chunk(get_loaded_extensions(),20) as $k => $v){
                                    echo implode(',',$v),"<br />";
                                }
                                {/php}
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        {/if}
    </div>
</div>
<script>
    //加载数据
    window.onload = function () {
        setInterval(function () {
            document.getElementById('now-time').innerText = new Date();
        },1000);
    }
</script>
</body>
</html>